<template>
  <div class="rect-control-container">
    <div class="rect-control-title">坐标</div>
    <div class="position-control-container">
      <div class="text-align-center">
        <el-input-number
          v-if="!widget.isRoot"
          v-model="widget.tempRect.top"
          :disabled="positionDisabled"
          :controls="false"
          size="small" class="width-input"
          @change="(val) => rectChange('top', val)"></el-input-number>
        <el-input-number
          v-else :value="0" :disabled="true" :controls="false"
          size="small" class="width-input"></el-input-number>
      </div>
      <div class="flex-justify-center">
        <div class="text-align-right">
          <el-input-number
            v-if="!widget.isRoot"
            v-model="widget.tempRect.left"
            :disabled="positionDisabled"
            :controls="false"
            size="small" class="width-input"
            @change="(val) => rectChange('left', val)"></el-input-number>
          <el-input-number
            v-else :value="0" :disabled="true" :controls="false"
            size="small" class="width-input"></el-input-number>
        </div>
        <div class="rect-control-placeholder"></div>
        <div class="text-align-left">
          <el-input-number
            v-if="!widget.isRoot"
            v-model="right"
            :disabled="positionDisabled"
            :controls="false"
            size="small" class="width-input"
            @change="(val) => rectChange('right', val)"></el-input-number>
          <el-input-number
            v-else :value="0" :disabled="true" :controls="false"
            size="small" class="width-input"></el-input-number>
        </div>
      </div>
      <div class="text-align-center">
        <el-input-number
          v-if="!widget.isRoot"
          v-model="bottom"
          :disabled="positionDisabled"
          :controls="false"
          size="small" class=" width-input"
          @change="(val) => rectChange('bottom', val)"></el-input-number>
        <el-input-number
          v-else :value="0" :disabled="true" :controls="false"
          size="small" class="width-input"></el-input-number>
      </div>
    </div>
    <div class="size-control-container flex-justify-between mar-top">
      <div class="flex-justify-start">
        <div class="font-size-14 mar-rgt-5">宽</div>
        <el-input-number
          v-model="widget.tempRect.width"
          :disabled="sizeDisabled" :min="0"
          size="small" controls-position="right"
          @change="(val) => rectChange('width', val)"></el-input-number>
      </div>
      <div class="flex-justify-start">
        <div class="font-size-14 mar-rgt-5">高</div>
        <el-input-number
          v-model="widget.tempRect.height"
          :disabled="sizeDisabled" :min="0"
          size="small" controls-position="right"
          @change="(val) => rectChange('height', val)"></el-input-number>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState} from "vuex";
  import {WidgetClass} from "@/modules/IDE/widget/atom/widget";
  import {WidgetFactory} from "@/modules/IDE/widgetFactory";
  import {deepCopy} from "@/utils";

  export default {
    name: "RectControl",
    props: {
      widget: {
        type: WidgetClass,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {
        right: 0,
        bottom: 0
      };
    },
    computed: {
      ...mapState({
        selectWidgetIds: state => state.ide.selectWidgetIds,
      }),
	    positionDisabled() {
				return this.widget.isLocked || !this.widget.draggable;
	    },
	    sizeDisabled() {
				return this.widget.isLocked || !this.widget.resizable;
	    },
    },
    watch: {
	    'widget.tempRect': {
				handler() {
					this.updateWidgetBottomRight();
				},
		    deep: true,
		    immediate: true,
	    }
    },
    methods: {
      // 上下左右控制
      rectChange(type, value) {
	      // 记录组件变更前后的值，用于撤销/重做相关处理
	      const widgetChangeArr = [];
        this.selectWidgetIds.forEach(widgetId => {
          const widget = WidgetFactory.getWidgetById(widgetId);
          const parent = WidgetFactory.getWidgetById(widget.parentId);
	        const oldWidget = WidgetFactory.getWidgetNecessaryProperty(widget);
					if (parent) {
						switch (type) {
							case 'left':
							case 'width':
								widget.tempRect[type] = value;
								this.right = parent.rect.width - widget.rect.left - widget.rect.width;
								break;
							case 'top':
							case 'height':
								widget.tempRect[type] = value;
								this.bottom = parent.rect.height - widget.rect.top - widget.rect.height;
								break;
							case 'right':
								widget.tempRect.left = parent.rect.width - this.right - widget.rect.width;
								break;
							case 'bottom':
								widget.tempRect.top = parent.rect.height - this.bottom - widget.rect.height;
								break;
							default:
								break;
						}
					} else {
						if (widget.type === 'page') return;
						switch (type) {
							case 'left':
							case 'width':
								widget.tempRect[type] = value;
								break;
							case 'top':
							case 'height':
								widget.tempRect[type] = value;
								break;
							default:
								break;
						}
					}
	        widget.rect = deepCopy(widget.tempRect);
	        const newWidget = WidgetFactory.getWidgetNecessaryProperty(widget);
	        widgetChangeArr.push({from: oldWidget, to: newWidget});
        });
	      if (!widgetChangeArr.length) return;
	      WidgetFactory.undoRedoHdl.operationHdl([{operationType: 'edit', widgets: widgetChangeArr}]);
      },
      updateWidgetBottomRight() {
        const parent = WidgetFactory.getWidgetById(this.widget.parentId);
        if (!parent) return;
        this.bottom = parent.rect.height - this.widget.tempRect.top - this.widget.tempRect.height;
        this.right = parent.rect.width - this.widget.tempRect.left - this.widget.tempRect.width;
      }
    },
  }
</script>

<style scoped lang="less">

  .rect-control-container {
    position: relative;

    .rect-control-title {
      position: absolute;
      top: 0;
      left: 0;
      font-size: 14px;
    }

    .position-control-container {
      .rect-control-placeholder {
        width: 65px;
        height: 30px;
        border-radius: 6px;
        background-image: repeating-linear-gradient(135deg, transparent, transparent 4px, #B3B3B3 5px, #B3B3B3 10px);
        margin: 5px;
      }

      /deep/ .el-input-number {
        width: 65px !important;
      }
    }

    .size-control-container {
      /deep/ .el-input-number {
        width: 110px !important;
      }
    }

  }

</style>
